/* 
    代码页面
*/

import React from 'react'
import MonacoEditor from 'react-monaco-editor'

class CodeEditor extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            code: '// write your code...',
        }

        // 绑定方法
        this.editorDidMount = this.editorDidMount.bind(this)
        this.onChange = this.onChange.bind(this)
    }

    editorDidMount (editor, monaco) {
        // console.log('editorDidMount', editor);
        editor.focus()
    }

    onChange (newValue, e) {
        // console.log('onChange', newValue, e);
        this.setState({ code: newValue })
    }

    render () {
        const { code } = this.state
        const options = {
            selectOnLineNumbers: true
        }

        return (
            <MonacoEditor
                width="100%"
                height="100%"  // 或任何你希望的高度
                language="golang"
                theme="vs-dark"
                value={code}
                options={options}
                onChange={this.onChange}
                editorDidMount={this.editorDidMount}
            />
        )
    }
}

export default CodeEditor
